<template>
  <div>
    <van-skeleton title :row="15" :loading="loading.isFirst">
    <div>
      <van-form @submit="methods.onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="data.obj.enterpriseName"
            name="企业名称"
            label="企业名称"
            placeholder="请输入企业名称"
          />
          <van-field
            v-model="data.obj.name"
            name="负责人名称"
            label="负责人名称"
            placeholder="请输入负责人名称"
          />

          <van-field
            v-model="fieldValue"
            is-link
            readonly
            label="商品类型"
            placeholder="请选择商品类型"
            @click="type_show = true"
          />

          <van-popup v-model:show="type_show" round position="bottom">
            <van-cascader
              v-model="cascaderValue"
              title="请选择经营种类"
              :options="data.obj.types"
              @close="type_show = false"
              @finish="onFinish"
            />
          </van-popup>

          <van-field
            v-model="data.obj.address"
            name="企业地址"
            label="企业地址"
            placeholder="请输入企业地址"
          />

          <van-field
            v-model="data.obj.announcement"
            name="企业公告"
            label="企业公告"
            placeholder="请输入企业公告"
          />

          <van-field name="uploader" label="企业logo">
            <template #input>
              <van-uploader
                v-model="data.obj.fileList1"
                :after-read="methods.afterRead"
              />
            </template>
          </van-field>

          <van-field name="uploader" label="企业照片">
            <template #input>
              <van-uploader
                v-model="data.obj.fileList2"
                :after-read="methods.afterReadb"
              />
            </template>
          </van-field>

          <van-field name="uploader" label="企业资质">
            <template #input>
              <van-uploader
                v-model="data.obj.fileList3"
                :after-read="methods.afterReadc"
              />
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 16px">
          <van-button block type="primary" native-type="submit">
            确认修改
          </van-button>
        </div>
      </van-form>
    </div>
</van-skeleton>
  </div>
</template>

<script setup>
import { getSupplierInfo, uploadSupplier, updateSupplier } from "@/api/me";
import { loading } from "@/views/dto/loadingDto";
import { showToast } from "vant";
import { onMounted, reactive, ref } from "vue";
const type_show = ref(false); //商品经营种类
const fieldValue = ref(""); //商品经营种类
const cascaderValue = ref(""); //商品经营种类
const data = reactive({
  obj: {
    show: false,
    supplier: {},
    enterpriseName: "",
    name: "",
    address: "",
    announcement: "",
    type: "",
    cascaderValue: "",
    showType: "",
    types: [
      {
        text: "冻货",
        value: "1",
      },
      {
        text: "肉类",
        value: "2",
      },
      {
        text: "海鲜",
        value: "3",
      },
      {
        text: "蔬菜",
        value: "4",
      },
    ],
    fileList1: [],
    fileList2: [],
    fileList3: [],
  },
});

// 选择商品类型方法
const onFinish = ({ selectedOptions }) => {
  type_show.value = false;
  fieldValue.value = selectedOptions.map((option) => option.text).join("/");
};

const methods = {
  onSubmit: () => {
    // console.log(data.obj, cascaderValue.value);
    methods.updateSupplier();
  },
  /**
   * 上传照片事件  企业logo
   */
  afterRead: (file) => {
    // 此时可以自行将文件上传至服务器

    const formData = new FormData();
    formData.append("file", file.file);
    uploadSupplier(formData).then((res) => {
        data.obj.supplier.slogo = res;
    });
  },
  /**
   * 企业照片
   */
  afterReadb: (file) => {
    // 此时可以自行将文件上传至服务器
    const formData = new FormData();
    formData.append("file", file.file);
    uploadSupplier(formData).then((res) => {
      data.obj.supplier.sphoto = res
    });
  },

  /**
   * 企业资质
   */
  afterReadc: (file) => {
    // 此时可以自行将文件上传至服务器
    const formData = new FormData();
    formData.append("file", file.file);
    uploadSupplier(formData).then((res) => {
        data.obj.supplier.squalification = res;
    });
  },
  //获取信息
  getSupplierInfo: async () => {
    const res = await getSupplierInfo();
    if (res.result === 0) {
      cascaderValue.value = res.data.stype;
      fieldValue.value = data.obj.types.find((d) => {
        return d.value == cascaderValue.value;
      }).text;
      data.obj.name = res.data.sname;
      data.obj.address = res.data.saddress;
      data.obj.announcement = res.data.sannouncement;
      data.obj.enterpriseName = res.data.senterpriseName;
      data.obj.name = res.data.sname;
      data.obj.type = res.data.stype;
      data.obj.supplier = res.data;
      data.obj.name = res.data.sname;
      data.obj.fileList1 = [{ url: res.data.slogo }];
      data.obj.fileList2 = [{ url: res.data.sphoto }];
      data.obj.fileList3 = [{ url: res.data.squalification }];
      loading.isFirst=false;
    }
  },
  /**
   * 修改企业信息(供应商信息)
   */
  updateSupplier: async () => {
    const { supplier, name, enterpriseName, address, announcement, type } =
      data.obj;
      const objs={
      id: supplier.sid,
      enterpriseName: enterpriseName,
      name: name,
      address: address,
      announcement: announcement,
      type: cascaderValue.value,
      logo: supplier.slogo,
      photo:   supplier.sphoto,
      qualification:  supplier.squalification,
    };
    console.log(objs);
    // return
    const res = await updateSupplier(objs);
    if(res.result===0){
      showToast("修改成功");
    }else{
      showToast(res.message);
    }
  },
};

onMounted(() => {
    loading.isFirst=true;
  methods.getSupplierInfo();
  
});
</script>

<style  scoped>
</style>